<template>
  <div id="home">
    <van-search v-model="searchData" placeholder="商品搜索 共239款好物" input-align="center" />
    <van-swipe :autoplay="3000" width="375" height="200">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swipeimg" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!--五个图标-->
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="(item,index) in channel" :key="index" :icon="item.icon_url" :text="item.name" />
    </van-grid>
    <!--品牌供应-->
    <div class="pinpai">
      <van-panel title="品牌制造商直供">
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(item1,index1) in dior" :key="index1" :icon="item1.imag_url" :text="item1.name">
            <van-image fit="cover" width="100%" height="150" :src="item1.imag_url" />
          </van-grid-item>
          
        </van-grid>
      </van-panel>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="shopping" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="chat" icon="chat-o">消息</van-tabbar-item>
      <van-tabbar-item name="manager" icon="manager-o">个人</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
  // @ is an alias to /src
  import axios from 'axios'
  import api from '../assets/config/api'
  import Vue from 'vue'
  import { Lazyload } from 'vant'

  import imag1 from '../assets/imags/1.png'
  import imag2 from '../assets/imags/2.png'
  import imag3 from '../assets/imags/3.png'
  import imag4 from '../assets/imags/4.png'

  import dior1 from '../assets/imags/package/1.png'
  import dior2 from '../assets/imags/package/2.png'
  import dior3 from '../assets/imags/package/3.png'
  import dior4 from '../assets/imags/package/4.png'

  import icon0 from '../assets/icon/MY.png'
  import icon1 from '../assets/icon/food.png'
  import icon2 from '../assets/icon/JS.png'
  import icon3 from '../assets/icon/SM.png'
  import icon4 from '../assets/icon/YL.png'

  Vue.use(Lazyload);

  export default {
    name: 'Home',
    data: function () {
      return {
        searchData: '',
        images: [
          imag1,
          imag2,
          imag3,
          imag4,
        ],
        channel: [
          {
            icon_url: icon0,
            name: '母婴',
          },
          {
            icon_url: icon1,
            name: '美食',
          },
          {
            icon_url: icon2,
            name: '酒水',
          },
          {
            icon_url: icon3,
            name: '数码',
          },
          {
            icon_url: icon4,
            name: '娱乐',
          }
        ],
        dior: [
          {
            imag_url: dior1,
            name: "ha",
          },
          {
            imag_url: dior2,
            name: "xixi",
          },
          {
            imag_url: dior3,
            name: "ll",
          },
          {
            imag_url: dior4,
            name: "bb",
          },
        ],
        active:"home"
      }
    },
    components: {

    },
    mounted() {
      //console.log(api)

    }
  }
</script>

<style lang="less">
  #home .swipeimg {
    width: 375px;
    height: 200px;
  }
</style>